<!-- 登录页 -->
<template>
  <div class="login">
    <div class="login_box">
      <h1>登录</h1>
      <el-input class="login_input"
                v-model="username"
                placeholder="请输入用户名"></el-input>
      <el-input class="login_input"
                v-model="password"
                placeholder="请输入密码"
                show-password></el-input>
      <el-button class="login_sumbit_button"
                 @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: "",
      password: ""
    };
  },
  created () {
    document.onkeypress = (e) => {
      if(e.keyCode == 13){
        this.login();
      }
    }
  },
  destroyed(){
    document.onkeypress = null;
  },
  methods: {
    login () {
      let data = {
        admin_name: this.username,
        password: this.password
      };
      this.$req.post(this.$api.login, data).then(res => {
        console.log(res.data);
        localStorage.setItem("token", res.data.token);
        this.$msg({
          showClose: true,
          message: "登录成功",
          type: "success"
        });
        this.$router.push("/");
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.login_box {
  width: 500px;
  margin: 200px auto;
  h1 {
    margin-bottom: 20px;
  }
  .login_input {
    margin-bottom: 10px;
  }
  .login_sumbit_button {
    width: 100%;
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>